<template>
  <div v-if="hasVoteInfo" class="vote">
    <div class="head">
      <div class="col">
        <div class="vote-title">{{ voteInfo.title }}</div>
        <div class="vote-creator" @click="handleSpace(voteInfo.uid)">
          <avatar
            class="avatar"
            size="sm"
            :src="voteInfo.face"
            :vip-status="-1"
          />
          <span class="user-name">{{ voteInfo.name }}</span>
          <span class="user-text">发起</span>
          <span class="user-text" v-if="voting">{{ leftTime(voteInfo.endtime) }}</span>
        </div>
      </div>
      <div class="vote-number van-hairline--surround">
        <span class="num">{{ voteInfo.cnt }}</span>
        <span class="text">参与人数</span>
      </div>
    </div>
    <div class="body">
      <div class="options-head">
        <span class="options-title">投票选项</span>
        <span class="choice-count">最多选{{voteInfo.choice_cnt}}项</span>
      </div>
      <ul class="options-list">
        <li
          v-for="item in voteInfo.options"
          :key="item.idx"
          :class="{max: maxCnt === item.cnt}"
          @click="handleCheck(item)"
        >
          <div class="option-content">
            <div v-if="!voting" class="precentage-bar" :style="{ width: item.percentage }"></div>
            <div class="vote-desc">
              <div class="option-text">{{ item.desc }}</div>
              <div v-if="!voting" class="vote-count">{{ item.cnt }}票</div>
            </div>
            <div v-if="!voting" class="vote-percentage">{{ item.percentage }}</div>
            <div v-if="voting" class="vote-checkbox">
              <van-checkbox v-model="item.checked" :checked-color="themeColor"></van-checkbox>
            </div>
          </div>
        </li>
      </ul>
      <div class="button-wrap">
        <van-button v-if="voting" :color="hasVoteResult ? themeColor : voteBtnDisabledColor" @click="handleVote" block size="large">投票</van-button>
        <van-button v-else :color="voteBtnDisabledColor" block disabled size="large" class="vbutton">投票已结束</van-button>
      </div>
    </div>
    <div class="foot van-hairline--top">
      <load-more
        ref="listRef"      
        :enabl-refresh="false"
        @load="handleLoad"
      >
        <vote-comment
          :comments="voteComments"
          :show-loading="false"
        />

      </load-more>
    </div>
  </div>
</template>

<script>
import { 
  Button as VanButton, 
  Checkbox as VanCheckbox
} from 'vant'
import Avatar from '@/components/Avatar'
import VoteComment from '@/components/Comment'
import LoadMore from '@/components/LoadMore'
import useInfo from './hooks/useInfo'
import useComment from './hooks/useComment'
export default {
  name: 'Vote',
  components: {
    VanButton,
    VanCheckbox,
    LoadMore,
    Avatar,
    VoteComment
  },
  props: {
    vid: {
      type: [Number, String],
      required: true
    }
  },
  setup(props) {    
    const infoParams = useInfo(props) 
    const commentParams = useComment(props)
    return {
      ...infoParams,
      ...commentParams
    }
  }
}
</script>

<style lang="scss" scoped>
  .vote{
    padding: {
      left: 10px;
      right: 10px;
      top: 10px;
    };
    .head{
      display: flex;
      align-items: center;
      margin: {
        top: 12px;
        bottom: 34px;
      }
      color: $color-text-regular;
      .col {
        flex: 1;
      }
    }
    .foot{
      padding-top: 20px;
    }
    &-title{
      margin: {
        right: 12px;
        bottom: 12px;
      };
      font: {
        size: 20px;
        weight: 700;
      }
      color: $color-text-primary;
    }
    &-creator {
      display: flex;
      align-items: center;
      font-size: 12px;
      .avatar{
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
      .user-name,.user-text{
        margin-right: 4px;
      }
      .user-name{
        color: $color-text-regular;
      }
      .user-text{
        color: $color-text-secondary;
      }
    }
    &-number{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 76px;
      height: 76px;
      @include border1px(#e7e7e7, 1px, 50%);
      font-size: 10px;
      .num {
        color: $theme-color;
        font-size: 18px;
      }
    }
    .options-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .options-title{
      font: {
        size: 16px;
        weight: 700;
      }
      color: $color-text-primary;
    }
    .choice-count{
      font-size: 13px;
      color: $color-text-secondary;
    }
    .options-list{
      margin-bottom: 18px;
      li{
        position: relative;
        display: flex;
        margin-bottom: 10px;
        @include border1px(#dcdcdc, 1px, 4px);
        cursor: pointer;
        overflow: hidden;
      }
    }
    .option-content{
      position: relative;
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      min-height: 44px;
      padding: 4px 13px;
    }
    .precentage-bar{
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(232,237,244, .9);
    }
    .vote-desc{
      font-size: 14px;
      color: $color-text-primary;
      -webkit-box-ordinal-group: 0;
      order: -1;
      z-index: 2;
    }
    .vote-count{
      font-size: 10px;
    }
    .vote-percentage{
      color: $color-text-regular;
      font-size: 14px;
    }
    .options-list li.max{
      .precentage-bar{
        background-color: #fad4df
      }
      .vote-percentage{
        font-weight: 700;
      }
    }
  }
  .vbutton{
    color: #b8c0cc;
  }
  .button-wrap{
    padding-top: 14px;
    margin-bottom: 20px;
  }
</style>